import { inject, observer } from 'mobx-react';
import classnames from 'classnames';
import { createReplyBottomAtt } from '../../../util/CoworkUtil';
import { WeaLocaleProvider, WeaTag, WeaTools } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
const Base64 = WeaTools.Base64;

@inject('coworkStoreMap')
@observer
class Detail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // show: props.content && props.content.cowork.coworkBaseSettingMap.itemstate == '1',
      show: props.content && props.content.cowork.itemsVO.itemstate == '1',
      important: '',
      visiable: false,
    };
  }

  componentDidMount() {
    this.getSummaryEllipse();
  }

  // 处理图标上下显示
  componentWillReceiveProps(nextProps) {
    const { content } = this.props;
    let con = content.cowork;
    // let show = con.coworkBaseSettingMap.itemstate == '1';
    let show = con.itemsVO.itemstate == '1';
    if (nextProps.coworkId != this.props.coworkId) {
      this.setState({
        tabKey: 'list',
        show,
      });
    }
  }

  componentDidUpdate() {
    this.getSummaryEllipse();
  }

  render() {
    const { content, isEllipse } = this.props;
    const { show } = this.state;
    const con = content.cowork || {},
      { itemsVO = {} } = con;
    const summaryCls = classnames({
      'cowork-content-summary': true,
      'wea-cowork-display': show,
      ellipse: isEllipse,
    });
    return (
      <div>
        <div className="cowork-content-container">
          <div className="cowork-content-discuss wea-f14">
            <p>
              {con.itemsVO && con.itemsVO.name}
              {con.over == '1' && (
                <span
                  className="cowork-over"
                  title={getLabel('21984', '已超期')}
                >
                  over
                </span>
              )}
              {con.itemsVO.status == '2' && (
                <span
                  className="cowork-end"
                  title={getLabel('22348', '已结束')}
                >
                  end
                </span>
              )}
              {con.isCoworkHiddened == '1' && (
                <span
                  className="cowork-hide"
                  title={getLabel('512783', '已隐藏')}
                >
                  hide
                </span>
              )}
              <i
                onClick={this.starClick}
                className={
                  con.isCoworkImportant == 0
                    ? 'icon-coms-Collection'
                    : 'icon-coms-Collection2'
                }
              />
              <em
                onClick={this.handleClick}
                className={show ? 'icon-coms-up2' : 'icon-coms-down2'}
              />
            </p>
            <span>
              {getLabel(2097, '负责人')}：
              <span className={'principal-a'}>
              {con.itemsVO && con.itemsVO.principalInfo.map(principal => (
                <a
                  href={`javaScript:openhrm(${
                    principal.id
                  });`}
                  onClick={window.pointerXY}
                >
                  {con.itemsVO &&
                    principal.lastname}
                </a>
              ))
              }
              </span>
              {getLabel(83209, '版块')}：
              <span>{con.itemsVO && con.itemsVO.coworkBelongToTypeName}</span>
              {getLabel(1339, '创建时间')}：
              <span>
                {con.itemsVO && con.itemsVO.createdate}{' '}
                {con.itemsVO && con.itemsVO.createtime.substr(0, 8)}
              </span>
              {itemsVO.enddate && [
                `${getLabel(743, '结束时间')}：`,
                <span>
                  {con.itemsVO && con.itemsVO.enddate}{' '}
                  {con.itemsVO && con.itemsVO.endtime}
                </span>,
              ]}
            </span>
            <div
              className="cowork-content-con"
              style={
                con.labelBycoworkList && con.labelBycoworkList.length !== 0
                  ? { marginTop: 10 }
                  : {}
              }
            >
              {con.labelBycoworkList &&
                con.labelBycoworkList.length !== 0 &&
                con.labelBycoworkList.map(label => (
                  <WeaTag
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_WeaTag@319tbx@${label.id}`}
                    className="cowork-content-tag"
                    closable
                    afterClose={() => this.deleteTag(label)}
                    key={label.id}
                    color={label.labelColor}
                    title={label.labelName}
                  >
                    {label.labelName}
                  </WeaTag>
                ))}
            </div>
          </div>
          {con.contentSummary && (
            <div className={summaryCls}>
              <div
                id="coworkSummary"
                dangerouslySetInnerHTML={{
                  __html: Base64.decode(con.contentSummary),
                }}
              />
            </div>
          )}
          <div
            className={`cowork-content-text ${
              show ? '' : 'wea-cowork-display'
            }`}
          >
            {con.itemsVO && [
              <div
                className="cowork-content-text-main"
                dangerouslySetInnerHTML={{ __html: con.itemsVO.remark }}
                key="remark"
              />,
              <div>
                {createReplyBottomAtt(
                  'icon-portal-content-o',
                  getLabel(857, '相关文档'),
                  con.itemsVO.relateddocList,
                )}
                {createReplyBottomAtt(
                  'icon-portal-Workflow-o',
                  getLabel(1044, '相关流程'),
                  con.itemsVO.relatedwfList,
                )}
                {createReplyBottomAtt(
                  'icon-portal-crm-o',
                  getLabel(783, '相关客户'),
                  con.itemsVO.relatedcusList,
                )}
                {createReplyBottomAtt(
                  'icon-portal-project',
                  getLabel(782, '相关项目'),
                  con.itemsVO.mutil_prjsList,
                )}
                {createReplyBottomAtt(
                  'icon-coms-Approval-o',
                  getLabel(33414, '相关任务'),
                  con.itemsVO.relatedprjList,
                )}
                {createReplyBottomAtt(
                  'icon-coms-currency-Enclosure',
                  getLabel(22194, '相关附件'),
                  con.itemsVO.relatedaccList,
                  true,
                )}
              </div>,
            ]}
          </div>
        </div>
      </div>
    );
  }

  getSummaryEllipse = () => {
    const themeFontSize =
      localStorage.getItem('theme-themeInfo') &&
      JSON.parse(localStorage.getItem('theme-themeInfo')).themeFontSize;
    let maxHeight = themeFontSize * 2.8;
    let flag =
      document.getElementById('coworkSummary') &&
      document.getElementById('coworkSummary').offsetHeight > maxHeight;
    this.props.setEllipse(flag);
  };

  updateShow = () => {
    const con = this.props.content.cowork || {};
    this.setState({
      show: con.itemsVO && con.itemsVO.itemstate == '1',
    });
  };

  // 上下图标内容显示隐藏
  handleClick = () => {
    this.setState({
      show: !this.state.show,
      iconUpShow: !this.state.iconUpShow,
    });
  };

  // 标心效果
  starClick = () => {
    const { content, markItemAsType } = this.props;
    if (content && content.cowork) {
      let important = content.cowork.isCoworkImportant;
      if (important == '0') {
        markItemAsType({ coworkids: content.id, type: 'important' });
      } else if (important == '1') {
        markItemAsType({ coworkids: content.id, type: 'normal' });
      }
    }
  };

  // //标星
  // mark = (item) => {
  //   const {content, markItemAsType} = this.props;
  //   markItemAsType({coworkids: content.id, type: item.key});
  // }

  // 删除tag
  deleteTag = (label) => {
    const { content, deleteCoworkLabels } = this.props;
    let id = content.id;
    deleteCoworkLabels(label, id);
  };

  // //编辑
  // edit = () => {
  //   //storeMapKey通过Detail页面传进来
  //   const coworkNewStore = this.props.coworkStoreMap.getMapStore(this.props.storeMapKey);
  //   coworkNewStore.doEditInit();
  // }

  // //查看日志
  // showLogDialog = (bool) => {
  //   this.setState({
  //     visiable: bool
  //   })
  // }

  // operateCoworkItem = (id, type) => {
  //   let oper = this.props.operateCoworkItem;
  //   if (type == 'end') {
  //     Modal.confirm({
  //       content: getLabel(4910, '确认要结束该协作吗?','note'),
  //       onOk() {
  //         oper && oper(id, type);
  //       }
  //     });
  //   } else {
  //     oper && oper(id, type);
  //   }
  // }
}

export default Detail;
